<template>
  <a-spin :style="`margin-top: 24px`" :spinning="confirmLoading">
    <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol"
                  :model="form" :rules="validatorRules">
      <a-form-model-item label="手机号" prop="mobiles">
        <a-textarea
            v-model="form.mobiles"
            placeholder="请输入要发送的手机号，多个手机号请使用英文逗号(,)分隔"
            :auto-size="{ minRows: 3, maxRows: 10 }"
        />
      </a-form-model-item>
      <a-form-model-item label="签名" prop="title" :wrapper-col="{ span: 2, offset: 0}">
        <z-dict-select-tag v-model="form.title" dictCode="smsTitle"/>
      </a-form-model-item>
      <a-form-model-item label="短信发送内容" prop="smsContent">
        <a-textarea
            v-model="form.smsContent"
            placeholder="请输入要发送的短信内容"
            :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">
          发送
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-spin>
</template>

<script>
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import { postAction } from '@/services/manage'

export default {
  name: 'SmsGroupSend',
  components: { ZDictSelectTag },
  data() {
    return {
      mobile: '',
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      form: {},
      validatorRules: {
        mobiles: [{ required: true, message: '请输入手机号' }],
        title: [{ required: true, message: '签名' }],
        smsContent: [{ required: true, message: '请输入短信发送内容' }]
      },
      url: {
        send: '/ping/sms/v1/groupSend'
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // 校验成功之后
          postAction(this.url.send, { mobiles: this.form.mobiles, title: this.form.title, smsContent: this.form.smsContent }).then(res => {
            if (res.success) {
              this.$message.success('发送成功')
            }
          })
        }
      })
    }
  }
}
</script>
